<template>
	<div class="ww100 relative overlay tc flex-ss warp hidden ptb1">
		<!-- 供电所 -->
		<div v-if="!publicStore.supplyId && !publicStore.distributId" class="list4-15 rad8 black-rgba20 flex-col-cc cursor ptb10" 
				style="border: 1px solid rgba(65, 255, 255, 0.4); box-sizing: border-box; height: auto;"
				v-for="(v, i) in isNull(publicStore.supplyList)? [] : publicStore.supplyList.filter((a:any)=> !publicStore._public.text || a.name.toLowerCase().indexOf(publicStore._public.text.toLowerCase()) != -1 || a.districtName.toLowerCase().indexOf(publicStore._public.text.toLowerCase()) != -1)" :key="i" @click="configStore.$patch({ supplyId: v.id, supplyName: v.name })">
			<div class="h90">
				<img :class="v.offline==1?'gray':''" class="hh100" src="@/assets/images/supply.png" alt="" />
			</div>
			<div class="mt5">{{v.name}}</div>
			<div class="mt5" :class="v.offline==1?'i6':'i21'">{{v.offline==1?'离线':'在线'}}</div>
		</div>
		<!-- 配电房 -->
		<div v-if="publicStore.supplyId && !publicStore.distributId" class="list4-15 rad8 black-rgba20 flex-col-cc cursor ptb10 relative"
				style="border: 1px solid rgba(65, 255, 255, 0.4); box-sizing: border-box; height: auto;"
				v-for="(v, i) in isNull(publicStore.distributList)? [] : publicStore.distributList.filter((a:any)=> !publicStore._public.text || a.name.toLowerCase().indexOf(publicStore._public.text.toLowerCase()) != -1)" 
				:key="i" @click="configStore.$patch({ distributId: v.id, distributName: v.name, token: '', user: '', voltage: '', bay: '' })"
				element-loading-background="rgba(0, 0, 0, 0.3)"
				v-loading="v.loading">
			<div class="h90">
				<img :class="v.offline==1?'gray':v.offline==0?'':''" class="hh100" src="@/assets/images/distribut.png" alt="" />
			</div>
			<div class="alarmLamp absolute t10 l10" v-if="v.alarm == 1">
              <div class="lamp"></div>
			</div>
			<div class="mt5" :class="v.offline==1?'ca':v.offline==0?'':''">{{v.name}}</div>
			<div class="mt5" :class="v.offline==1?'ca':v.offline==0?'i21':'i21'">{{v.ip}} {{v.offline==1?'离线':v.offline=='0'?'在线':'连接中..'}}</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	const { proxy }:any = getCurrentInstance()
	const configStore = proxy.configStore()
	const publicStore = proxy.publicStore()
	const state = reactive({
	  ...publicStore.$state,
	})
</script>

<style scoped lang="scss">
	.alarmLamp{
		width: 24px;
		height: 28px;
		background-color: red;
		border-radius:50% 50% 5% 5%;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}
	.lamp{
		width: 28px;
		height: 28px;
        animation-name: imageAnim;
		animation-duration: 0.5s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-timing-function: ease;
		animation-play-state: running;
		background-image: radial-gradient(yellow,red);
	}
	@keyframes imageAnim{
		0% {opacity: 0.9;}
		50% {opacity: 0.5;}
		100% {opacity: 0;}
	}
</style>
